<template>
  <div class="build">
    <van-nav-bar
		title="建馆类型"
		left-arrow
		@click-left="onClickLeft"
		/>
    <div class="build-type-panel" style="margin-top: 45px;">
      <van-panel
        v-for="(buildTypeItem, index) in buildTypeLists"
        :key="index"
        :title="buildTypeItem.title"
        :desc="buildTypeItem.desc"
        :class="{ac: index == indexs}"
        @click.native="selectedTypeItem(index)">
      </van-panel>
    </div>
    <van-button size="large" @click="toBuilding">确定</van-button>
  </div>
</template>

<script>
import initData from '../assets/initData.js'
import {mapState} from 'vuex'
import {updateMemorialCs, getMemorialCs, saveMemorialCs, getSoppingCart} from '../api/getData.js'
export default {
  data() {
    return {
        indexs: 0,
        mid: '',
        goodname:"升级类型",
        goodprice:0,
        goodnum:1,
        gooddesc:"升级类型不同，道具选择性不同",
      buildTypeLists: [
        {
          title: '免费馆',
          desc: '建馆免费，若非馆主删除或其它违规等行为，服务期为永久（以下各类型馆均同），墓园背景、主墓、墓碑及其它辅助建馆配件等均为一般性选材，且选择余地较小，除免费祭祀品外，亲友祭祀均需自行购买祭祀品！',
          price: 0
        },
        {
          title: '高档墓园',
          desc: '收费200元，墓园背景、主墓、墓碑及其它辅助建馆配件等为较好选材，选择余地较多，同时，并赠送200元的祭祀品供亲友祭奠等免费使用，相当于本高档墓园可免费建设！',
          price: 200
        },
        {
          title: '陵园',
          desc: '收费400元，墓园背景、主墓、墓碑及其它辅助建馆配件等选材精致，比高档墓园拥有更多选择性，并赠送400元的祭祀品供亲友祭奠等免费使用，相当于本陵园为免费建设！',
          price: 400
        },
        {
          title: '纪念堂',
          desc: '收费600元，集陵园和纪念堂独有的堂馆功能于一体，并赠送600元的祭祀品供亲友祭奠等免费使用，相当于纪念堂免费建设！',
          price: 600
        }
      ]
    }
  },
  created () {
    this.indexs = this.$route.query.value
    this.mid = JSON.parse(window.localStorage.getItem('item')).id
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    selectedTypeItem (index) {
      this.buildTypeLists.forEach((el,elIndex) => {
        this.$set(this.buildTypeLists, elIndex, Object.assign(this.buildTypeLists[elIndex], {class: {actived: false}}))
      })
      this.indexs = index
      this.$set(this.buildTypeLists, index, Object.assign(this.buildTypeLists[index], {class: {actived: true}}))

    },
    toBuilding () {
      window.localStorage.removeItem('memorialtype')
      if (this.$route.query.value == undefined) {

        // this.$router.push('/building-edit')
      } else {
          if (this.$route.query.value >= this.indexs) {
                this.$toast('请选择更高的进行升级')
          } else {
              // this.$router.push('/car')
              window.localStorage.setItem('memorialtype', this.indexs)
              // alert('升级成功')
              var that = this
              this.goodprice = this.indexs * 200
              switch (this.indexs) {
                case 0:
                  this.goodname = '免费'
                  break;
                case 1:
                  this.goodname = '升级成高档墓园'
                  break;
                case 2:
                  this.goodname = '升级成陵园'
                  break;
                case 3:
                  this.goodname = '升级成纪念堂'
                  break;
                default:
                  break;
              }
              this.$axios.get("/huainianwang/shoppingCart/app/addShoppingCart?mid="+this.mid+"&goodname="+this.goodname+"&goodprice="+this.goodprice+"&goodnum="+this.goodnum+"&gooddesc="+this.gooddesc+"")
                    .then(function(res){
                        // alert(1)

                        that.$toast('升级成功，您可以返回详情页面查看墓园建设去建设您的墓园')
                         switch (that.goodnum) {
                          case '免费':
                            // this.$store.commit('MUDI_EDIT_INFO', initData.mianfei)
                            saveMemorialCs('aaa', 'bbbb', initData.mianfei)
                            break;
                          case '升级成高档墓园':
                            // this.$store.commit('MUDI_EDIT_INFO', initData.gaoji)
                            saveMemorialCs('aaa', 'bbbb', initData.gaoji)
                            break;
                          case '升级成陵园':
                            // this.$store.commit('MUDI_EDIT_INFO', initData.lingyuan)
                            saveMemorialCs('aaa', 'bbbb', initData.lingyuan)
                            break;
                          case '升级成纪念堂':
                            // this.$store.commit('MUDI_EDIT_INFO', initData.jiniantang)
                            saveMemorialCs('aaa', 'bbbb', initData.jiniantang)
                            break;
                          default:
                            break;
                        }
                        that.$router.go(-1)
                    },function(err){
                    }).catch(function(error){
                    });


          }

      }
    }
  }
}
</script>

<style lang="scss" scoped>

.van-button--large {
	background: #31a2c8;
	color: #fff;
	// position: fixed;
	// bottom: 0;
	height: 35px;
	line-height: 35px;
}
.van-cell-group.van-hairline--top-bottom.van-panel.actived{
  .van-cell.van-panel__header {
    background-color: rgba(222, 176, 108, 0.3411764705882353);
  }
}

</style>
<style lang="scss">
.van-nav-bar{
	background: #31a2c8;
	color: #fff;
}
.van-nav-bar .van-icon{
	color: #fff;
}
.build .van-cell__label{
  color: red !important;
}
.ac .van-cell{
 /* .van-cell-group.van-hairline--top-bottom.van-panel.actived */
 background: #d4edf1 !important;
 color: #4a4a4a !important;
 font-weight: 600 !important;
 font-size: 19px !important;
 line-height: 30px;
 .van-cell__label {
   color: #2d7494 !important;
   font-size: 14px !important;
   line-height: 20px ;
 }
}
</style>
